<template>
    <div class="business">
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" @click="onClickLeft" style="height: 40rem;left: 20rem;top: 7rem;"
                src="../assets/img/back.png">
            <p class="fz37 cfff hpd tc">经营统计</p>
        </div>
        <div class="box-center pr">
            <div class="box-card">
                <div class="tab-buttons">
                    <button :class="{ active: activeTab === 'tab1' }" @click="activeTab = 'tab1'">今日</button>
                    <button :class="{ active: activeTab === 'tab2' }" @click="activeTab = 'tab2'">昨日</button>
                    <div class="calendar">
                        <img src="../assets/img/cancel/calendar.png" alt="">
                        <el-dropdown trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link">
                                自定义
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="week">一周内</el-dropdown-item>
                                <el-dropdown-item command="month">一个月内</el-dropdown-item>
                                <el-dropdown-item command="threeMonths">三个月内</el-dropdown-item>
                                <el-dropdown-item command="halfYear">半年内</el-dropdown-item>
                                <el-dropdown-item command="oneYear">一年内</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div v-show="activeTab === 'tab1'">
                    <div class="income">
                        <div class="money">
                            <p><img src="../assets/img/cancel/income.png" alt=""></p>
                            <p>￥555</p>
                            <p>收入</p>
                        </div>
                        <div class="order">
                            <div class="money">
                                <p><img src="../assets/img/cancel/order.png" alt=""></p>
                                <p>￥666</p>
                                <p>收入</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Tab2 -->
                <div v-show="activeTab === 'tab2'">
                    <div class="income">
                        <div class="money">
                            <p><img src="../assets/img/cancel/income.png" alt=""></p>
                            <p>￥777</p>
                            <p>收入</p>
                        </div>
                        <div class="order">
                            <div class="money">
                                <p><img src="../assets/img/cancel/order.png" alt=""></p>
                                <p>￥888</p>
                                <p>收入</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-echarts" v-show="activeTab === 'tab1'">
                <h1>收入分布</h1>
                <!-- 饼图 -->
                <div class="income-echarts" id="income_echarts"></div>
            </div>
            <!-- 柱状图 -->
            <div class="box-echarts" v-show="activeTab === 'tab1'">
                <h1>订单分析</h1>
                <div class="income-echarts" id="income_echarts2"></div>
            </div>
            <!-- Tab2图表 -->
            <div class="box-echarts" v-show="activeTab === 'tab2'">
                <h1>收入分布</h1>
                <!-- 饼图 -->
                <div class="income-echarts" id="income_echarts3"></div>
            </div>
            <!-- 柱状图 -->
            <div class="box-echarts" v-show="activeTab === 'tab2'">
                <h1>订单分析</h1>
                <div class="income-echarts" id="income_echarts4"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { Calendar } from 'vant';
import { statistics } from "@/api/index";

import 'vant/lib/calendar/style';
import * as echarts from 'echarts';
export default {
    components: { Calendar },
    data() {
        return {
            date: '',
            value1: '',
            show: false,
            activeTab: 'tab1',
        }
    },
    mounted() {
        // statistics({date:'2022-03-10',id:11})
        // .then(r=>{
        //     console.log(r);
        // })

        let myChart, myChart2, myChart3, myChart4;
        this.$watch('activeTab', (newVal, oldVal) => {

            if (newVal === 'tab1') {
                if (myChart2) {
                    myChart2.dispose();
                }
                if (myChart) {
                    myChart.dispose();
                }
                myChart = echarts.init(document.getElementById('income_echarts'));
                myChart2 = echarts.init(document.getElementById('income_echarts2'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '50%',
                        right: '5%',
                        orient: 'vertical',
                    },
                    series: [
                        {
                            name: 'Access From',
                            hoveranimation: true,
                            type: 'pie',
                            radius: ['30%', '50%'],
                            center: ['40%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.value + '元';
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 500, name: '洗车', itemStyle: { color: "#947FFF" } },
                                { value: 1566, name: '保养', itemStyle: { color: "#FD7AA4" } },
                            ]
                        }
                    ]
                });
                myChart2.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['维修', '保养', '洗车']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    legend: {
                        show: true,
                        x: "right",
                        y: "center",
                        orient: 'vertical',
                    },
                    grid: {
                        top: '5%',    // 一下数值可为百分比也可为具体像素值
                        bottom: '35%',
                        left: '10%',
                        right: '40%'
                    },
                    series: [
                        {
                            name: '维修',
                            type: 'bar',
                            data: [300,null,null],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#66A0FE' },
                                    { offset: 1, color: '#F7FAFF' }
                                ])
                            }
                        },
                        {
                            name: '保养',
                            type: 'bar',
                            data: [0,170,null],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#90E8FF' },
                                    { offset: 1, color: '#F7FAFF' }
                                ])
                            }
                        },
                        {
                            name: '洗车',
                            type: 'bar',
                            data: [0,0,360],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FDC473' },
                                    { offset: 1, color: '#F7FAFF' }
                                ])
                            }
                        }
                    ]
                })
            } else if (newVal === 'tab2') {
                if (myChart) {
                    myChart.dispose();
                }
                if (myChart2) {
                    myChart2.dispose();
                }
                myChart3 = echarts.init(document.getElementById('income_echarts3'));
                myChart4 = echarts.init(document.getElementById('income_echarts4'));
                myChart3.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '50%',
                        right: '5%',
                        orient: 'vertical',
                    },
                    series: [
                        {
                            name: 'Access From',
                            hoveranimation: true,
                            type: 'pie',
                            radius: ['30%', '50%'],
                            center: ['40%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.value + '元';
                                }
                            },

                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 500, name: '洗车', itemStyle: { color: "#947FFF" } },
                                { value: 1566, name: '保养', itemStyle: { color: "#FD7AA4" } },
                            ]
                        }
                    ]
                });
                myChart4.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['维修', '保养', '洗车']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    legend: {
                        show: true,
                        x: "center",
                        y: "center",
                    },
                    grid: {
                        top: '5%',    // 一下数值可为百分比也可为具体像素值
                        bottom: '35%',
                        left: '10%',
                        right: '40%'
                    },
                    series: [
                        {
                            type: 'bar',
                            data: [
                                {
                                    value: 300, name: '维修', itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#66A0FE' },
                                            { offset: 1, color: '#F7FAFF' }
                                        ])
                                    }
                                }, {
                                    value: 150, name: '保养', itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#90E8FF' },
                                            { offset: 1, color: '#F7FAFF' }
                                        ])
                                    }
                                }, {
                                    value: 350, name: '洗车', itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            { offset: 0, color: '#FDC473' },
                                            { offset: 1, color: '#F7FAFF' }
                                        ])
                                    }
                                }],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                // 背景色
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            barWidth: 25,

                        }
                    ]
                })
            }
        }, { immediate: true })
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
            this.show = false;
            this.date = this.formatDate(date);
            //日期
            console.log(this.date)
        },
        // 日历选择
        handleCommand(command) {
            console.log(command);
        },

        //图表
        drawCharts() {
            var myChart = echarts.init(document.getElementById('income_echarts'));
            var myChart2 = echarts.init(document.getElementById('income_echarts2'));
            var myChart3 = echarts.init(document.getElementById('income_echarts3'));
            var myChart4 = echarts.init(document.getElementById('income_echarts4'));
            function resize() {
                myChart.resize();
                myChart2.resize();
            }
            window.addEventListener('resize', resize);
        }
    },

}
</script>
<style scoped>
.el-dropdown-link {
    cursor: pointer;

}

.business {
    background-color: #f7f7f7;
    margin-bottom: 257rem;
}

.box-center {
    margin: -275rem 20rem 0 20rem;
    border-top-left-radius: 2%;
    border-top-right-radius: 2%;
}

/* 日历 */
.calendar {
    font-size: 25rem;
    position: absolute;
    top: 56.2rem;
    right: 28rem;
}

.calendar img {
    width: 25rem;
    height: 25rem;
}

.tab-content {
    font-size: 20rem;
}

.box-card {
    background-color: #fff;
    height: 466rem;
    border-radius: 3%;
}

.tab-buttons {
    position: relative;
    font-size: 30rem;
    display: flex;
    justify-content: center;
    padding-bottom: 21px;
    padding-top: 40rem;
    border-bottom: 7px solid #F7F7F7;
}

.tab-buttons button {
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 150rem;
    height: 70rem;
    line-height: 35rem;
    color: #3183FB;
}

.tab-buttons button:nth-child(1) {
    border-top-left-radius: 28rem;
    border-bottom-left-radius: 28rem;
}

.tab-buttons button:nth-child(2) {
    border-top-right-radius: 28rem;
    border-bottom-right-radius: 28rem;
}

.tab-buttons button.active {
    color: #fff;
    background-color: #2F81FA;
}

.tab-content {
    padding: 10px;
    border: 1px solid rgb();
}

.income {
    display: flex;
    justify-content: space-around;
    padding-top: 40rem;
}

.money p {
    margin-bottom: 30rem;
}

.income p {
    font-size: 23rem;
}

.money,
.order {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 210rem;
    height: 250rem;
    border: 1px solid #F7FAFF;

}

.money p:nth-child(2) {
    font-weight: bolder;
    font-size: 25rem;
}

.order p:nth-child(2) {
    font-weight: bolder;
    font-size: 30rem;
}

.money img {
    border-radius: 25%;
    width: 28rem;
    height: 28rem;
    background-image: linear-gradient(#FFA96D, #FF5C26);
    padding: 15rem;
}

.order img {
    border-radius: 25%;
    width: 28rem;
    height: 28rem;
    background-image: linear-gradient(#FF9B60, #FF5C26);
    padding: 15rem;
}

.income-echarts {
    width: 100%;
    height: 600rem;
}

.box-echarts {
    height: 710rem;
    border-radius: 2%;
    margin-top: 20rem;
    box-shadow: -1px -1px 5px rgba(0, 0, 0, .2);
    background-color: #fff;
}

.box-echarts h1 {
    font-size: 31rem;
    margin: 0 33rem;
    padding: 37rem 0 23rem 0;
    border-bottom: 7px solid #f7f7f7;

}
</style>